<template>
  <div class="continer">
    <div class="one">
      <a-card class="card" hoverable :style="{  width: '700px',height:'550px', marginBottom: '20px' }">
        <phoneNumber v-if="active=='1'" :isshow="loading"></phoneNumber>
        <scanCode v-if="active=='2'"></scanCode>
        <mailbox v-if="active=='4'"></mailbox>
        <div class="card_icon">
          <icon @dataList="accept"></icon>
        </div>
      </a-card>
    </div>

  </div>

</template>

<script setup>
import {reactive, ref} from "vue";
import phoneNumber from "~/pages/login/components/phoneNumber.vue"
import scanCode from "~/pages/login/components/scanCode.vue"
import mailbox from "~/pages/login/components/mailbox.vue"
import icon from "~/pages/login/components/icon.vue"
//判断当前处在哪种登录方式上面
const active = ref('1')
/**
 * 接受子组件传来的选中值
 * @param e
 */
const accept = (e) => {
  active.value = e
  console.log(active.value, ' active.value')
}
const loading = reactive({
  taget: {
    demonstrate: false,
    dabelist: false
  }

})
const doubleClick = () => {
  loading.taget.demonstrate = !loading.taget.demonstrate
  loading.taget.dabelist = !loading.taget.dabelist
}

</script>

<style scoped lang="scss">
.continer {
  background-color: rgb(242, 243, 245);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .one {
    .card {
      display: flex;
      justify-content: center;
      align-items: center;

      .card_icon {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 10px;
      }
    }
  }


}
</style>